﻿<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>完善当当购物车页面</title>
		<link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
	</head>

	<body>

		<div class="content">
			<div class="logo">
				<img src="images/dd_logo.jpg"><span>关闭</span>
			</div>
			<div class="cartList">
				<ul>
					<li>¥<input type="text" name="price" value="21.90"></li>
					<li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
					<li id="price0">¥21.90</li>
					<li>
						<p>移入收藏</p>
						<p>删除</p>
					</li>
				</ul>
				<ul>
					<li>¥<input type="text" name="price" value="24.00"></li>
					<li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
					<li id="price1">¥24.00</li>
					<li>
						<p>移入收藏</p>
						<p>删除</p>
					</li>
				</ul>
				<ol>
					<li id="totalPrice">&nbsp;</li>
					<li><span>结 算</span></li>
				</ol>
			</div>
		</div>
		<script>
			var plusbtns = document.getElementsByName("plus");
			var amountbtns = document.getElementsByName("amount");
			var minusbtns = document.getElementsByName("minus");
			var prices = document.getElementsByName("price");
			var totalPrice = document.getElementById("totalPrice");

			function calcTotal() {
				var total = 0;
				for(var k = 0; k < prices.length; k++) {
					var p = document.getElementById("price" + k);
					total = total + parseFloat(p.innerHTML.substring(1));
				}
				totalPrice.innerHTML = "&yen" + toround(total);
			}
			calcTotal();
			for(var i = 0; i < plusbtns.length; i++) {
				plusbtns[i].index = i;
				plusbtns[i].onclick = function() {
					var j = this.index;
					amountbtns[j].value = parseInt(amountbtns[j].value) + 1;
					var price = document.getElementById("price" + j);
					price.innerHTML = "&yen" + toround(amountbtns[j].value * prices[j].value);
					calcTotal();
				}
			}
			for(var i = 0; i < minusbtns.length; i++) {
				minusbtns[i].index = i;
				minusbtns[i].onclick = function() {
					var j = this.index;
					if(parseInt(amountbtns[j].value) > 0) {
						amountbtns[j].value = parseInt(amountbtns[j].value) - 1;
						var price = document.getElementById("price" + j);
						price.innerHTML = "&yen" + toround(amountbtns[j].value * prices[j].value);
					} else {
						alert("亲，已经不能在减了");
					}
					calcTotal();
				}
			}

			function toround(g) {
				g = Math.round(g * 100) / 100;
				if((g + "").indexOf(".") == -1) {
					return g + ".00";
				} else {
					return g + "0";
				}
			}
		</script>
	</body>

</html>